<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useMessage} from "naive-ui";
import {loadingBar} from "../HomeView_N.vue"

const message = useMessage;
const loginUser = ref(getUser());
const riderData = ref({
  orderNum: 1,
  riderLev: 1,//骑手等级
  avgRate: 0,
  preference: '',//接单偏好
  recentOrders: [//近期完成订单，3条
    {username:'薛薛',avatarUrl:'',endTime:'2023-12-21',title:'谁帮我带下饭',tags:['计算中心','打饭'],orderRate: 4.5,orderReview:'我上不动了，我要死了'},
  ],
  todayIncome:43,//今日收入
  monthIncome:1145.14,
});

const showDialog = ref(false);
const show = ref(false);
const loadData = () => {
  axios({
    method: "get",
    url: BASE_URL+"/v1/rider/select?userId="+loginUser.value.userId
  }).then(res => {
    if (res.data.code === 2000) {
      console.log(riderData.value);
      console.log(res.data.data);
      riderData.value = res.data.data;
      console.log(riderData.value);
      loadingBar.finish();
      show.value = true;
    } else {
      message().error('加载数据失败咯~');
    }
  })
}

onMounted(() => {
   if (loginUser.value.level >= 20) {
     loadData();
   }
  // } else {
  //   showDialog.value = true;
  // }
})
</script>

<template>
  <n-flex vertical style="justify-content: center;gap: 20px 10px">
    <n-flex style="flex-wrap: nowrap">
      <div style="height: 300px;width: 1000px;border: 1px solid rgba(255, 255, 255, 0.09);border-radius: 3px;overflow: hidden">
        <n-carousel autoplay>
          <img
              class="carousel-img"
              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
          >
          <img
              class="carousel-img"
              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
          >
          <img
              class="carousel-img"
              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
          >
          <img
              class="carousel-img"
              src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
          >
          <template #dots="{ total, currentIndex, to }">
            <ul class="custom-dots">
              <li
                  v-for="index of total"
                  :key="index"
                  :class="{ ['is-active']: currentIndex === index - 1 }"
                  @click="to(index - 1)"
              />
            </ul>
          </template>
        </n-carousel>
      </div>
      <n-card style="height: 300px;width: 50%;">
        <n-list>
          <template #header>
            <span style="font-size: 20px">热门活动</span>
          </template>
          <template #footer>
            <div  style="display: flex;justify-content: center;padding-top: 5px">
              <n-button text style="font-size: 17px">更多</n-button>
            </div>
          </template>
          <n-list-item>
            <n-flex vertical style="padding-left: 20px">
              <n-button text style="height: 30px;font-size: 17px;justify-content: left">外卖加速中！</n-button>
              <n-button text style="height: 30px;font-size: 17px;justify-content: left">外卖加速中！</n-button>
              <n-button text style="height: 30px;font-size: 17px;justify-content: left">外卖加速中！</n-button>
              <n-button text style="height: 30px;font-size: 17px;justify-content: left">外卖加速中！</n-button>
            </n-flex>
          </n-list-item>
        </n-list>
      </n-card>
    </n-flex>
    <n-card title="骑手数据" style="width: 100%;">
      <div style="display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px">
        <n-card title="完成订单" style="height: 100%;">
          <span style="font-size: 40px;color: #63e2b7">
            {{riderData.orderNum}}
          </span>
        </n-card>
        <n-card title="骑手等级" style="height: 100%;">
          <span style="font-size: 40px;color: #63e2b7">
            {{riderData.riderLev}}
          </span>
        </n-card>
        <n-card title="平均评分" style="height: 100%;">
          <span style="font-size: 40px;color: #63e2b7">
            {{riderData.avgRate}}
          </span>
        </n-card>
        <n-card title="接单偏好" style="height: 100%;">
          <span style="font-size: 40px;color: #63e2b7">
            {{riderData.preference}}
          </span>
        </n-card>
      </div>
    </n-card>
    <n-card title="近期订单" style="width: 100%;">
      <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px">
        <n-card style="height: 100%;" :bordered="false" v-for="order in riderData.recentOrders">
          <n-flex>
            <n-avatar round></n-avatar>
            <span>{{order.username}}</span>
            <span>{{order.endTime}}</span>
          </n-flex>
          <n-thing :title="order.title" content-style="margin-top: 10px;">
            <template #description>
              <n-space size="small" style="margin-top: 4px">
                <n-tag :bordered="false" type="success" size="small" v-for="tag in order.tags">
                  {{tag}}
                </n-tag>
                <n-rate allow-half readonly :value="order.orderRate"/>
              </n-space>
            </template>
            {{order.orderReview}}
          </n-thing>
        </n-card>
      </div>
    </n-card>
    <n-flex style="flex-wrap: nowrap">
      <n-card title="收益中心" style="width: 35%;">
        <n-flex style="justify-content: space-between">
          <div style="padding: 30px 40px">
            <div style="text-align: center">今日收益</div>
            <span style="font-size: 30px;color: #eae24c">
              <n-number-animation
                  ref="numberAnimationInstRef"
                  :from="0.00"
                  :to="riderData.todayIncome"
                  :precision="2"
              />
            </span>
          </div>
          <div style="padding: 30px 40px">
            <div style="text-align: center">本月收益</div>
            <span style="font-size: 30px;color: #eae24c">
              <n-number-animation
                  ref="numberAnimationInstRef"
                  :from="0.00"
                  :to="riderData.monthIncome"
                  :precision="2"
              />
            </span>
          </div>
          <n-button tertiary style="width: 100%;">继续加油接单吧！</n-button>
        </n-flex>
      </n-card>
      <n-card title="优秀骑手" style="width: 65%;">
        <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px">
          <n-card :bordered="false">
            <n-flex vertical justify="center" align="center">
              <n-avatar round :size="50"></n-avatar>
              <span>2233不问天</span>
              <n-rate :value="4.8" allow-half readonly></n-rate>
              <span>评分：4.8</span>
            </n-flex>
          </n-card>
          <n-card :bordered="false">
            <n-flex vertical justify="center" align="center">
              <n-avatar round :size="50"></n-avatar>
              <span>陈柒野</span>
              <n-rate :value="5.0" allow-half readonly></n-rate>
              <span>评分：5.0</span>
            </n-flex>
          </n-card>
          <n-card :bordered="false">
            <n-flex vertical justify="center" align="center">
              <n-avatar round :size="50"></n-avatar>
              <span>理塘丁真</span>
              <n-rate :value="4.7" allow-half readonly></n-rate>
              <span>评分：4.7</span>
            </n-flex>
          </n-card>
        </div>
      </n-card>
    </n-flex>
  </n-flex>
</template>

<style scoped>
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.custom-dots li {
  display: inline-block;
  width: 12px;
  height: 4px;
  margin: 0 3px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 40px;
  background: #fff;
}
</style>